<template>
    <div class="book">
        <div class="title">下载中心</div>
        <div class="down-wrap">
            <div class="down-list">
                <div class="list-item" v-for="item in gameList" :key="item.title + item.id">
                    <div class="game-info">
                        <div class="game-img"><img :src="item.drawingUrl" /></div>
                        <div class="game-title">
                            <span class="game-name">{{ item.gameName }}</span>
                            <span class="game-desc">{{ item.introduce }}</span>
                        </div>
                    </div>
                    <div class="game-types">游戏</div>
                    <div class="game-down-time">已于2023/{{ Math.floor(Math.random() * 10 + 1) }}/{{
    Math.floor(Math.random() * 11 + 1) }}更新</div>
                    <div class="game-down-btn">
                        <span class="down-btn">打开</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { getUserGameList } from '../api';
import { useChangeLogin } from '../store'
const gameList = ref([])
const isLogin = useChangeLogin()
watch(isLogin, (newVal) => {
    if (newVal) {
        getGameList()
    }
})
async function getGameList() {
    try {
        const res = await getUserGameList({
            pageNo: 1,
            size: 20
        })
        if (!res.code) {
            gameList.value = res.data.records || []
        }
        console.log('getUserGameList: ', res)
    } catch (error) {

    }
}
onMounted(() => {
    getGameList()
})
</script>
<style lang="scss" scoped>
.book {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    .down-wrap {
        width: 100%;
        margin-top: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .title {
        font-size: 28px;
        color: #23272a;
        font-weight: 700;
    }
    .down-list {
        .list-item {
            display: flex;
            border-bottom: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            align-items: center;
            .game-types { flex: 1; }
            .game-down-time { flex: 1; }
            .game-down-btn { 
                flex: 1;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding-right: 50px;
                .down-btn {
                    width: 60px;
                    height: 30px;
                    border: 1px solid #23272a;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    color: #555;
                    cursor: pointer;
                }
             }
            .game-info {
                display: flex;
                flex: 1;
                .game-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                    margin-right: 15px;
                }
                .game-title {
                    display: flex;
                    flex-direction: column;
                    .game-name {
                        font-size: 14px;
                        color: #444;
                        margin-bottom: 5px;
                    }
                    .game-desc {
                        font-size: 12px;
                        color: #b9b7b7;
                        width: 200px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            &:last-child {
                border-bottom: none;
            }
        }
    }
}
</style>